<template>
    <v-app style="background: #f7f9fb">
        <v-snackbar
                timeout="3000"
                v-model="bar"
        >
            请检查表单信息！
            <template v-slot:action="{ attrs }">
                <v-btn
                        color="pink"
                        text
                        v-bind="attrs"
                        @click="bar = false"
                >
                    Close
                </v-btn>
            </template>
        </v-snackbar>
        <center style="margin-top: 10%">
            <div style="font-weight: bold; font-size: x-large">尽心尽力写生活</div>
            <br/>
            <v-card class="login-card">
                <v-card-title>登录</v-card-title>
                <br/>
                <v-form style="width: 85%"
                        ref="form"
                        v-model="valid"
                        lazy-validation
                >
                    <v-text-field outlined dense
                            color="primary"
                            v-model="form.email"
                            :rules="emailRules"
                            label="邮箱"
                            required
                    ></v-text-field>
                    <br/>
                    <v-text-field outlined dense
                            type="password"
                            color="primary"
                            v-model="form.password"
                            :rules="pwdRules"
                            label="密码"
                            required
                            @keyup.enter.native="user_login"
                    ></v-text-field>
                </v-form>
                <v-alert style="width: 85%"
                         color="red"
                         type="error"
                         dense
                         v-if="error"
                >邮箱或密码错误</v-alert>
                <br v-if="!error"/>
                <v-btn depressed color="primary" height="42px" width="85%" @click="user_login">登录</v-btn>
                <br/>
                <br/>
                <router-link to="/forget" style="color: dodgerblue; text-decoration: none">忘记密码</router-link>
                <br/>
                <br/>
            </v-card>
            <br/>
            <div style="color: gray">© 2021-present — Daman</div>
            <br/>
        </center>
    </v-app>
</template>

<script>
    export default {
        name: "login",
        data: () => ({
            bar: false,
            valid: true,
            pwdRules: [
                v => !!v || '请输入密码',
            ],
            form: {
                email: '',
                password: '',
            },
            emailRules: [
                v => !!v || '请输入邮箱',
                v => /.+@.+\..+/.test(v) || '请输入正确的邮箱格式',
            ],
            error: false,
        }),
        watch:{
            'form.email': function () {
                this.error = false;
            },
            'form.password': function () {
                this.error = false;
            }
        },
        methods:{
            user_login(){
                const t = this;
                if (this.valid){
                    this.userLogin(this.form).then(function (resp) {
                        if (resp.data){
                            t.$router.push('/');
                        } else {
                            t.error = true;
                        }
                    })
                } else{
                    this.bar = true;
                }
            }
        }
    }
</script>

<style scoped>
    .login-card{
        width: 360px;
    }
    @media screen and (max-width: 600px){
        .login-card{
            width: 90%;
        }
    }
</style>
<!--// validate () {-->
<!--//     this.$refs.form.validate()-->
<!--// },-->
<!--// reset () {-->
<!--//     this.$refs.form.reset()-->
<!--// },-->
<!--// resetValidation () {-->
<!--//     this.$refs.form.resetValidation()-->
<!--// },-->